import React from 'react';
import './App.css';
import LinkAnimation from './LinkAnimation/index'
import Navs from './Nav/index'
import Tab from './Tab/index'
import LiveButton from './LiveButton/index'
import LinkIput from './LinkIput/index'
import LinkBacktop from './LinkBacktop/index'
/**
 * Navs组件需要配合Tab组件一起使用Navs,然后需要给Navs传参数navList遵循格式{title:string,id:number}以及Tab name传的是navList中的对应id
 * onAction Navs 中的点击中的方法 参数拿到的是对应的tab的id
 */

class App extends React.Component<any>{
  state: Readonly<{
    navList: Nav<string, number>[],
    btn: boolean
  }>;
  constructor(props: any) {
    super(props)
    this.state = {
      btn: true,
      navList: [
        { title: 'teb切换', id: 0 },
        { title: 'button按钮', id: 1 },
        { title: '返回顶部', id: 2 },
        { title: 'input', id: 3 }
      ]
    }
  }
  render() {
    const { navList, btn } = this.state
    return (
      <div className='app' >

        <Navs count='1' animation={true} fixed={false} navList={navList} onAction={this.onAction} color='#fff' backgroundColor='pink' fontSize='16px' action={true}>
          <Tab name={0} >
            <div style={{ height: '50px', width: '50px', backgroundColor: 'pink' }} onClick={this.a}>点我</div>
            <LinkAnimation LinkIf={btn} type='top'>
              <div style={{ height: '50px', width: '50px', backgroundColor: 'pink' }}>555</div>
              <div style={{ height: '50px', width: '100px', backgroundColor: 'blue' }}>555</div>
              <div style={{ height: '50px', width: '50px', backgroundColor: '#000' }}>555</div>
              <div style={{ height: '50px', width: '50px', backgroundColor: 'pink' }}>asd</div>
            </LinkAnimation>
          </Tab>
          <Tab name={1}>
            我的
            <div className='' style={{ height: '200px', backgroundColor: 'red' }}></div>
          </Tab>
          <Tab name={2}>
            <div >客服</div>
          </Tab>
          <Tab name={3}>
            <div >哈哈</div>
          </Tab>
        </Navs>
      </div>
    )
  }
  onAction(e: any) {

  }
  a = (e: any) => {
    const { btn } = this.state
    console.log(btn);

    this.setState({
      btn: !btn
    })
  }
  OnInput(e: string) {


  }
}

export default App;
